<template>
  <a-card :bordered="false">
    <a-form :form="form">
      <a-form-item style="display:none">
        <a-input v-decorator="['id']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="企业名字">
        <a-input
          placeholder="企业名字"
          :disabled="isDisabled"
          v-decorator="['enterName',{rules: [
              {required: true, message: '请输入企业名字'},]}]"
        />
      </a-form-item>

      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系电话">
        <a-input
          placeholder="企业名字"
          :disabled="isDisabled"
          v-decorator="['phone',{rules: [
              {required: true, message: '请输入联系电话'},]}]"
        />
      </a-form-item>

      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="企业地址">
        <a-input
          placeholder="企业地址"
          :disabled="isDisabled"
          v-decorator="['address',{rules: [
              {required: true, message: '请输入企业地址'},]}]"
        />
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 16, offset: 5 }" v-has="'enter:edit'">
        <a-button
          style="width:100%"
          type="primary"
          html-type="submit"
          :loading="btnloading"
          @click="handleEdit"
        >{{subMsg}}
        </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
  import STable from '@/components/table/'
  import { checkPermission } from '@/utils/permissions'
  import moment from 'moment'
  import pick from 'lodash.pick'
  import { getAction, postAction } from '../../api/manage'

  export default {
    name: 'TableList',
    components: {
      STable,
    },
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        form: this.$form.createForm(this),
        mdl: {},
        // 高级搜索 展开/关闭
        advanced: false,
        //时间格式化
        dateFormat: 'YYYY-MM-DD',
        btnloading: false,
        // 查询参数
        // 表头
        // 加载数据方法 必须为 Promise 对象
        enterDat: null,
        selectedRowKeys: [],
        selectedRows: [],
        subMsg: '修改',
        isDisabled: true,
        url: {
          addOrUpdate: "/base/enter/addOrUpdate",
          get: "/base/enter/get",
        },
      }
    },
    filters: {},
    created() {
      this.getData()
    },
    methods: {
      moment,
      async getData() {
        const { result } = await getAction(this.url.get)
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(result, 'enterName', 'phone', 'address'))
        })
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      handleEdit() {
        if (this.isDisabled) {
          this.isDisabled = !this.isDisabled
          this.subMsg = '保存'
          return
        }
        if (!this.isDisabled) {
          this.isDisabled = !this.isDisabled
          this.subMsg = '修改'
        }
        this.form.validateFields((err, values) => {
          if (!err) {
            this.btnloading = true
            console.log('Received values of form: ', values)
            postAction(this.url.addOrUpdate,values)
            postAction(this.url.addOrUpdate, values).then(res => {
              if (res.success) {
                this.$message.success(`保存成功！`)
                this.getData()
              } else {
                this.$message.warn(`保存失败：` + res.message)
              }
            }).catch(() => {
                 this.$message.error('系统错误，请稍后再试')
               }).finally(() => {
              this.btnloading = false
            })
          }
        })
      },
      handleOk() {
        this.$refs.table.refresh(true)
        console.log('handleSaveOk')
      },
      delByIds(ids) {
        // delEnterprise(ids).then((res) => {
        //   if (res.code === 200) {
        //     this.$message.success('删除成功')
        //     this.handleOk()
        //   } else {
        //     this.$message.error(res.msg)
        //   }
        //   this.selectedRowKeys = []
        // })
      },
    },
    watch: {
      /*
        'selectedRows': function (selectedRows) {
          this.needTotalList = this.needTotalList.map(item => {
            return {
              ...item,
              total: selectedRows.reduce( (sum, val) => {
                return sum + val[item.dataIndex]
              }, 0)
            }
          })
        }
        */
    },
  }
</script>
